﻿<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="UTF-8"/>
		<title>幻灯片</title>
		<style type="text/css">
			#flash {
				width: 500px;
				height: 300px;
				border: 2px #0C3 solid;
				overflow: hidden;
			}
			
			#boxt {
				width: 2000%;
				height: 100%;
			}
			
			#boxt img {
				width: 500px;
				height: 300px;
			}
			
			#boxt ul {
				margin: 0px;
				padding: 0px;
				list-style: none;
				float: left;
			}
			
			#boxt ul li {
				float: left;
			}
		</style>
	</head>

	<body>
		<h1>案例一定宽情况下幻灯片简单循环运动</h1>
		<div id="flash">
			<div id="boxt">
				<ul id="flashul">
					<li>
						<a href="#"><img src="img/hf1.jpg" alt="合肥野生动物园" /></a>
					</li>
					<li>
						<a href="#"><img src="img/hf2.jpg" alt="合肥天鹅湖" /></a>
					</li>
					<li>
						<a href="#"><img src="img/hf3.jpg" alt="合肥天鹅湖万达广场" /></a>
					</li>
					<li>
						<a href="#"><img src="img/hf4.jpg" alt="合肥天鹅湖" /></a>
					</li>
				</ul>
				<ul id="flashul2">
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			var f = document.getElementById("flash");
			var fu = document.getElementById("flashul");
			var fu2 = document.getElementById("flashul2");
			var lis = fu.getElementsByTagName("li");
			var l = lis.length;
			var w = 500;
			var step = 10;

			var i = 0;
			fu2.innerHTML = fu.innerHTML;

			function A() {
				f.scrollLeft = i;
				if(i % w == 0) setTimeout(A, 1000);
				else {
					if(i > l * w) i = 0;
					setTimeout(A, 1);
				}
				i += step;
			}
			A();
		</script>
	</body>

</html>